<template>
  <div class="qm-mask" v-if="cloudToggle">
    <div class="qm-back" @click="resetSource">
      <i class="appIcon-iconfont appIcon-mobanguanbi" size="20"></i>
    </div>

    <iframe v-if="!sourcePreview" allowtransparency="true" :src="globalEnv + '/space-cloud-new/#/index?token=' + token
    + '&fileType=' +
    sourceType
    + '&isSelect=1' + '&source=freeeditor'" frameborder="0" height="100%" width="100%"></iframe>

    <iframe v-if="sourcePreview" allowtransparency="true" :src="
      globalEnv + '/space-cloud-new/#/index?token=' +
      token +
      '&preview=' +
      sourcePreview +
      '&fileUrl=' +
      sourceUrl +
      '&fileType=' +
      sourceType + '&source=freeeditor'
    " frameborder="0" height="100%" width="100%"></iframe>
  </div>
</template>

<script lang="ts" setup>
import { useEditorStore } from '@/store'
import { storeToRefs } from 'pinia'

import { useMainStore } from '@/store'
const mainStore = useMainStore()
const { globalEnv } = storeToRefs(mainStore)

const { cloudToggle, sourcePreview, sourceUrl, sourceType } = storeToRefs(useEditorStore())
const editorStore = useEditorStore()
const token = localStorage.getItem("token")

const resetSource = () => {
  editorStore.setCloudToggle(false)
  editorStore.setSourceUrl('')
  editorStore.setSourceType('')
  editorStore.setAudioUrl('')
  editorStore.setSourcePreview(false)

}
</script>

<style lang="scss" scoped>
.qm-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qm-back {
  position: fixed;
  display: flex;
  align-items: center;
  right: 50px;
  top: 20px;
  width: 40px;
  height: 40px;
  justify-content: center;
  border-radius: 100%;
  background: rgba($color: white, $alpha: 0.6);
  backdrop-filter: blur(6px);
  z-index: 1000;
}
</style>
